<template>
  <my-navigation-bar>宝宝安心管家</my-navigation-bar>
  <view v-if="flag">
    <view class="index-box" :style="flag?{top: '180rpx'}:''">
      <!-- 搜索框 -->
      <view class="search-bar">
        <uni-icons class="icon-tubiaozhizuomoban_sousuo"></uni-icons>
      </view>
      <!-- 中间部分 -->
      <view class="center-box">
        <view class="top-box">
          <view class="left-box">
            <view class="top">
              <text>宝宝</text>
              <text class="icon-kongzhitai" @tap="goControl"></text>
            </view>
            <view class="middle">
              <text>2023.1.1</text>
              <text class="long" @tap="goEdit">2个月7天 <text class="icon-bianji"></text> </text>
            </view>
            <view class="bottom">
              <text>59.7-64.3cm | 6.0-7.5kg</text>
            </view>
          </view>
          <view class="image-box">
            <image src="../../static/image/index/index-baby.jpg" mode=""></image>
          </view>
        </view>
        <view class="bottom-box">
          <view class="top" >
            <text class="tip">宝宝变化</text>： 小家伙会用腿瞪你手，真是个调皮蛋！当你用手拖住TA的脚时，会feel到TA在用力jjifaifaijf
            <text class="btn" @tap="goIndexArticle"></text>
          </view>
          <view class="bottom">
            <view class="left ellipsis">
              <text class="tip">喂养指南</text>：如果宝宝入睡时哭闹甲方竟敢哦奥国农
              
            </view>
            <view class="right ellipsis">
              <text class="tip">行为习惯</text>：宝宝的睡眠模式和成年人不用昂i昂纳
             
            </view>
          </view>
        </view>
      </view>
    
      <view class="bottom-box">
        <view class="header">
          热门推荐
        </view>
        <!-- 内容区域 -->
        <scroll-view scroll-y="true" scroll-left="false" class="hot-content">
         <view class="item-box" @tap="goIndexVideo">
           <view class="img-box">
             <image src="../../static/image/index/11.jpg" mode=""></image>
           </view>
           <text>别误会孩子，有没有安全感看这点！</text>
         </view>
        <view class="item-box"  @tap="goIndexVideo">
           <view class="img-box">
             <image src="../../static/image/index/12.jpg" mode=""></image>
           </view>
           <text>从小缺爱的人会变成啥样？7月大婴儿的惊人实验！</text>
         </view>
         <view class="item-box"  @tap="goIndexVideo">
           <view class="img-box">
             <image src="../../static/image/index/11.jpg" mode=""></image>
           </view>
           <text>别误会孩子，有没有安全感看这点！</text>
         </view>
         <view class="item-box"  @tap="goIndexVideo">
           <view class="img-box">
             <image src="../../static/image/index/11.jpg" mode=""></image>
           </view>
           <text>别误会孩子，有没有安全感看这点！</text>
         </view>
         <view class="item-box"  @tap="goIndexVideo">
           <view class="img-box">
             <image src="../../static/image/index/11.jpg" mode=""></image>
           </view>
           <text>别误会孩子，有没有安全感看这点！</text>
         </view>
        </scroll-view>
      </view>
    
    
    
    </view>
  </view>
 <view :style="{transform: state.coverTransform, transition: state.coverTransition}" @touchmove="moveH" @touchstart="startH" @touchend="endH" v-else>
  <scroll-view scroll-y="true" class="scroll-box">
    <view class="index-box" :style="flag?{top: '180rpx'}:''">
      <!-- 搜索框 -->
      <view class="search-bar">
        <uni-icons class="icon-tubiaozhizuomoban_sousuo"></uni-icons>
      </view>
      <!-- 中间部分 -->
      <view class="center-box">
        <view class="top-box">
          <view class="left-box">
            <view class="top">
              <text>宝宝</text>
              <text class="icon-kongzhitai" @tap="goControl"></text>
            </view>
            <view class="middle">
              <text>2023.1.1</text>
              <text class="long" @tap="goEdit">2个月7天 <text class="icon-bianji"></text> </text>
            </view>
            <view class="bottom">
              <text>59.7-64.3cm | 6.0-7.5kg</text>
            </view>
          </view>
          <view class="image-box">
            <image src="../../static/image/index/index-baby.jpg" mode=""></image>
          </view>
        </view>
        <view class="bottom-box">
          <view class="top" >
            <text class="tip">宝宝变化</text>： 小家伙会用腿瞪你手，真是个调皮蛋！当你用手拖住TA的脚时，会feel到TA在用力jjifaifaijf
            <text class="btn" @tap="goIndexArticle"></text>
          </view>
          <view class="bottom">
            <view class="left ellipsis">
              <text class="tip">喂养指南</text>：如果宝宝入睡时哭闹甲方竟敢哦奥国农
              
            </view>
            <view class="right ellipsis">
              <text class="tip">行为习惯</text>：宝宝的睡眠模式和成年人不用昂i昂纳
             
            </view>
          </view>
        </view>
      </view>
    
      <view class="bottom-box">
        <view class="header">
          热门推荐
        </view>
        <!-- 内容区域 -->
        <scroll-view scroll-y="true" scroll-left="false" class="hot-content">
         <view class="item-box" @tap="goIndexVideo">
           <view class="img-box">
             <image src="../../static/image/index/11.jpg" mode=""></image>
           </view>
           <text>别误会孩子，有没有安全感看这点！</text>
         </view>
        <view class="item-box"  @tap="goIndexVideo">
           <view class="img-box">
             <image src="../../static/image/index/12.jpg" mode=""></image>
           </view>
           <text>从小缺爱的人会变成啥样？7月大婴儿的惊人实验！</text>
         </view>
         <view class="item-box"  @tap="goIndexVideo">
           <view class="img-box">
             <image src="../../static/image/index/11.jpg" mode=""></image>
           </view>
           <text>别误会孩子，有没有安全感看这点！</text>
         </view>
         <view class="item-box"  @tap="goIndexVideo">
           <view class="img-box">
             <image src="../../static/image/index/11.jpg" mode=""></image>
           </view>
           <text>别误会孩子，有没有安全感看这点！</text>
         </view>
         <view class="item-box"  @tap="goIndexVideo">
           <view class="img-box">
             <image src="../../static/image/index/11.jpg" mode=""></image>
           </view>
           <text>别误会孩子，有没有安全感看这点！</text>
         </view>
        </scroll-view>
      </view>
    
    
    
    </view>
  </scroll-view>
 </view>
</template>

<script setup>
  import myNavigationBar from '../../components/my-navigation-bar/my-navigation-bar.vue';
  import {computed} from "vue";
  import useBounceFunc from "../../hooks/bounce.js";
  const {state, moveH, startH, endH} = useBounceFunc();
  const flag = computed(()=>{
    return getApp().globalData.isIphoneX;
  })
  const goControl = () => {
    uni.navigateTo({
      url: '/subPkgIndex/control/control'
    })
  }
  const goEdit = () => {
    console.log(11);
    uni.navigateTo({
      url: '/subPkgPerson/edit/edit'
    })
  }
const goIndexArticle = () => {
  uni.navigateTo({
    url: '/subPkgIndex/indexArticle/indexArticle'
  })
}
const goIndexVideo = () => {
  uni.navigateTo({
    url: "/subPkgIndex/indexVideo/indexVideo"
  })
}
</script>


<style lang="scss">
  @mixin right-arrow($x) {
    &::before {
      position: absolute;
      font-family: 'iconfont';
      content: '\e60c';
      display: block;
      width: 35rpx;
      height: 35rpx;
      right: $x;
      bottom: 0;
      background-color: #F7F7F7;
      color: #878787;
      font-size: 24rpx;
      border-radius: 50%;
      text-align: center;
      line-height: 35rpx;
    }
  }

  @mixin ellipse($num: 2) {
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: $num;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }
 .scroll-box{
   height: 100vh;
 }
  .index-box {
    position: relative;
    top: 150rpx;
    
    .search-bar {
      width: 95%;
      margin: 0 auto;
      margin-bottom: 10rpx;
      height: 60rpx;
      border-radius: 20px;
      background-color: #F6F6F6;
      box-sizing: border-box;
      padding-top: 8rpx;

      .icon-tubiaozhizuomoban_sousuo {
        color: #9C9C9C;
        font-size: 36rpx;
        margin-left: 16rpx;
      }
    }

    .center-box {
      // height: 500rpx;
      background-color: #FEF5F8;
      box-sizing: border-box;
      padding: 20rpx 0;

      .top-box {
        display: flex;
        justify-content: space-around;
        padding: 0 50rpx;
        margin-bottom: 55rpx;

        .left-box {

          .top {
            color: #4C3553;
            font-size: 36rpx;
            font-weight: 900;

            .icon-kongzhitai {
              color: #999999;
              font-size: 62rpx;
              font-weight: 500;
              margin-left: 28rpx;
            }
          }

          .middle {
            margin-top: 25rpx;
            color: #4C3553;
            font-size: 28rpx;

            .long {
              margin-left: 20rpx;

              .icon-bianji {
                color: #000;
              }
            }
          }

          .bottom {
            color: #999999;
            font-size: 26rpx;
            font-weight: 700;
          }
        }

        .image-box {
          width: 240rpx;
          height: 130rpx;
          margin: auto 0;

          image {
            width: 100%;
            height: 100%;
          }
        }
      }

      .bottom-box {
        margin: 0 auto;
        border-radius: 50rpx;
        width: 95%;
        // height: 260rpx;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        box-sizing: border-box;
        padding: 30rpx;
        overflow: hidden;
        color: #777777;



        .tip {
          font-weight: 700;
          color: #4C3553;
        }

        .top {
          position: relative;
          padding-right: 35rpx;
          box-sizing: border-box;
          @include ellipse();
          @include right-arrow(0rpx);
          .btn{
            position: absolute;
            bottom: -10rpx;
            right: -10rpx;
            z-index: 2;
            opacity: 0;
            display: block;
            width: 50rpx;
            height: 50rpx;
            // background-color: red;
          }
        }

        .bottom {
          display: flex;
          justify-content: center;
          margin-top: 35rpx;

          .left {
            position: relative;
            padding-right: 35rpx;
            margin-right: 30rpx;
            box-sizing: border-box;
            border-right: 1rpx solid #F7F7F7;
            @include ellipse();
            @include right-arrow(12rpx);
          }

          .right {
            position: relative;
            padding-right: 35rpx;
            box-sizing: border-box;
            @include ellipse();
            @include right-arrow(0rpx);
          }
        }
      }
    }

    .bottom-box {
      padding: 10rpx;
      
      .header {
        font-size: 37rpx;
        font-weight: 900;
        width: 100%;
        height: 80rpx;
        box-sizing: border-box;
        padding: 20rpx 0 20rpx 30rpx;
       
      }
      .hot-content{
        height: calc(100vh - 800rpx);
        .item-box{
          padding: 20rpx 20rpx 20rpx 30rpx;  
          display: flex;
          justify-content: flex-start;
          border-bottom: 1rpx solid #eee;
          &:active{
            background-color: #eee;
          }

          .img-box{
            width: 320rpx;
            height: 150rpx;
            background-color: blue;
            border-radius: 10rpx;
            image{
              width: 100%;
              height: 100%;
            }
          }
          text{
            display: inline-block;
            width: 410rpx;
            margin-left: 30rpx;
            @include ellipse(3);
          }
        }
      }

     }
  }
</style>
